<template>
	<cl-crud @load="onLoad">
		<template #slot-top-stats>
			<commission-count ref="commission-count"></commission-count>
		</template>

		<template #slot-datepicker>
			<div class="_top-filter">
				<div style="width:125px;">
					<el-select
						size="mini"
						class="time-type"
						v-model="selects.timeType"
						@change="val => refresh({ timeType: val, page: 1 })"
					>
						<el-option label="创建时间" :value="0"></el-option>
						<el-option label="付款时间" :value="1"></el-option>
						<el-option label="结算时间" :value="2"></el-option>
					</el-select>
				</div>
				<div style="width:350px;">
					<date-picker
						style="width:350px;"
						:datas="datas"
						@change="
							val => refresh({ startTime: val[0], endTime: val[1], page: 1 }, 'date')
						"
						@refresh="refresh({ startTime: '', endTime: '', page: 1 }, 'date')"
					></date-picker>
				</div>
			</div>
		</template>
		<template #slot-staff>
			<div>
				<select-taobao
					class="selects"
					v-model="selects.taobaoId"
					@change="val => refresh({ taobaoId: val, page: 1 })"
				></select-taobao>
			</div>
			<div></div>
			<div>
				<el-select
					style="margin-left: 10px;"
					placeholder="请选择渠道"
					size="mini"
					v-model="selects.relation"
					@change="val => refresh({ relationId: val, page: 1 })"
				>
					<el-option label="全部渠道" value></el-option>
					<el-option
						v-for="(item, index) in options.relation"
						:key="index"
						:label="item.relationName"
						:value="item.relationId"
					></el-option>
				</el-select>
			</div>
			<div>
				<select-group
					v-model="selects.teamId"
					@change="val => refresh({ teamId: val, page: 1 }, 'team')"
				></select-group>
			</div>
			<div>
				<select-staff
					class="selects"
					ref="selectstaff"
					v-model="selects.staffId"
					@change="val => refresh({ staffId: val, page: 1 })"
				></select-staff>
			</div>
			<div>
				<el-button
					@click="channelExport"
					v-permission="'crm:order:positionExport'"
					type="primary"
					style="margin-left:10px"
					size="mini"
				>
					<i class="el-icon-download"></i>导出报表
				</el-button>
			</div>
		</template>
		<template #table-column-relationId="{ scope }">
			<div class="relation-title" @click="toDetail(scope.row)">
				{{ scope.row.relationId }}
			</div>
		</template>
		<template #table-column-relationName="{ scope }">
			<div class="relation-title" @click="toDetail(scope.row)">
				{{ scope.row.relationName }}
			</div>
		</template>
	</cl-crud>
</template>

<script>
import CommissionCount from '@/components/order/commission-count';
import DatePicker from '@/components/order/date-picker';
import SelectStaff from '@/components/order/select-staff';
import SelectTaobao from '@/components/order/select-taobao';
import SelectGroup from '@/components/order/select-group';
import { dateFormat, download } from '@/utils/index';
import moment from 'moment';
export default {
	name: 'Channel',
	data() {
		return {
			crud: null,

			selects: {
				timeType: 0,
				taobaoId: '',
				positionId: '',
				staffId: '',
				tkStatus: '',
				teamId: '',
				label: '',
				relation: ''
			},
			options: {
				label: [],
				relation: []
			},
			params: {},
			datas: []
		};
	},

	components: {
		CommissionCount,
		DatePicker,
		SelectStaff,
		SelectTaobao,
		SelectGroup
	},
	created() {
		this.params = {
			timeType: 0,
			...this.params,
			...dateFormat(0)
		};
		this.getRelationList();
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service({
				page: this.$service.order.relationStatistics
			})
				.set('dict', {})
				.set('table', {
					props: {
						'default-sort': {
							order: 'descending',
							prop: 'validCommission'
						}
					},
					columns: [
						{
							label: '渠道ID',
							prop: 'relationId',
							align: 'center',
							minWidth: 200
						},
						{
							label: '渠道名称',
							prop: 'relationName',
							align: 'center',
							minWidth: 140,
							emptyText: '无'
						},
						{
							label: '运营人',
							prop: 'staffName',
							align: 'center',
							minWidth: 140,
							emptyText: '无'
						},
						{
							label: '全部单数',
							prop: 'orderNum',
							align: 'center',
							minWidth: 140,
							sortable: true
						},
						{
							label: '预估收入',
							prop: 'pubSharePreFee',
							align: 'center',
							minWidth: 140,
							sortable: true
						},
						{
							label: '结算预估',
							prop: 'pubShareFee',
							align: 'center',
							minWidth: 140,
							sortable: true
						},
						{
							label: '有效单数',
							prop: 'validOrderNum',
							align: 'center',
							minWidth: 140,
							sortable: true
						},
						{
							label: '有效佣金',
							prop: 'validCommission',
							align: 'center',
							emptyText: '无',
							minWidth: 140,
							sortable: true
						}
					],
					op: {
						visible: false
					},
					on: {}
				})
				.set('search', {
					key: {
						placeholder: '请输入渠道位名称、渠道位ID'
					}
				})
				.set('layout', [
					[
						'refresh-btn',
						'slot-datepicker',
						'flex1',
						'slot-staff',
						'flex1',
						'search-key'
					],
					['slot-top-stats'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					this.params = params;
					const { list, subData } = await next(params);
					list.map(item => {
						item.alipayTotalPrice = parseFloat(item.alipayTotalPrice).toFixed(2);
						item.totleCommission = parseFloat(item.totleCommission).toFixed(2);
					});
					this.$refs['commission-count'].refresh(subData);
				})
				.done();
			app.refresh(this.params);
		},

		refresh(params, type) {
			if (type === 'date') {
				this.params.startTime = params.startTime;
				this.params.endTime = params.endTime;
			}
			// if (type === 'taobao') {
			// this.selects.positionId = '';
			// params.positionId = this.selects.positionId;
			// this.$refs['promotion'].value2 = '';
			// this.$refs['promotion'].refresh({
			// 	// 选择阿里妈妈后，更新推广位
			// 	taobaoId: params.taobaoId
			// });
			// }
			if (type === 'team') {
				this.selects.staffId = '';
				params.staffId = '';
				this.$refs['selectstaff'].refresh({
					teamId: params.teamId
				});
			}
			this.crud.refresh(params);
		},
		toDetail(row) {
			let newParams = {};
			if (this.params.startTime && this.params.endTime) {
				newParams = {
					startTime: this.params.startTime,
					endTime: this.params.endTime
				};
			} else {
				newParams = {
					...dateFormat(0)
				};
			}
			this.$emit('showdetail', {
				relationId: row.relationId,
				relationTitle: row.relationName,
				...newParams
			});
		},
		// 导出报表
		channelExport() {
			this.$service.order.relationExport(this.params).then(res => {
				download({
					data: res,
					fileName: `渠道统计-${moment().format('YYYY-MM-DD HH:mm:ss')}`
				});
			});
		},
		getRelationList() {
			this.$service.account.channel.list().then(res => {
				this.options.relation = res;
			});
		}
	}
};
</script>

<style lang="stylus" scoped>
.delete-row {
	margin-left: 10px;
	cursor: pointer;

	&:hover {
		color: red;
	}
}
._top-filter {
	width: auto;
}
._top-filter-other {
	display: flex;
	width: 100px;
	margin-left: 10px;
	line-height: 0;
}

._top-filter-other-text {
	margin-left: 2px;
}
.relation-title {
	color: #f40;
	cursor pointer;
}
</style>
